<html>
<head>	
	<LINK href="./css/common.css" rel="stylesheet" type="text/css">
	<LINK href="./css/grid-editor.css" rel="stylesheet" type="text/css">
	
	<!-- INCLUDE MOSHU'S LIBRARY-->    
    <script type="text/javascript" src="./../Lib/Moshu.js"></script>
    <script type="text/javascript" src="./../Lib/2D/Moshu.Canvas2D.js"></script>	
	<!-- END MOSHU'S -->
	
	
	<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.min.js"></script>
	<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/jquery-ui.min.js"></script>
	<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/themes/ui-lightness/jquery-ui.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
        var IE = false;
    </script>
    <!--[IF IE]>
    <script type="text/javascript">
        IE = true;
    </script>
<![endif]-->
</head>
<body>
	
	<div class="page">
		<div class="page-header ">
			<div class="title">
				<span>Moshu's Canvas Library - Collision Test</span>		
			</div>		
			<div class="menu"></div>			
		</div>
	
	<div class="page-content" style="">
		<div class="controls-container resizable">
			<div class="properties">
                <div class="property">
                    No controls available
                </div>
                
			</div>
		</div>
		<div class="canvas-container resizable">
			<canvas width="800" height="500" id="c" style="border:2px solid black;background-image:url('./images/bird/pc4.png')"></canvas>
            <br />
            <center> <div id="distance" style="width:50px;overflow:hidden;"></div>  </center>
           
		</div>
		<div class="io-container section-title resizable">
			<div style="height:10%;">Code samples</div>
			<div id="output" style="width:100%; height:90%;overflow-y:scroll;background:white;color:black;padding-left:10px">
				<h2>Collision Test</h2>
				Demonstrates the SAT algorithm for polygon collistion detection.
                <br /><br /><br /><br />		
			</div>
		</div>
	</div>
	<div class="page-footer">
	</div></div>
	<script type="text/javascript">
		$( ".menu" ).load( "partials/menu.html" );
		$( ".page-footer" ).load( "partials/footer.html" );
		//$(".resizable").resizable();
	</script>
	
	<script type="text/javascript">
	    var scene = new Moshu.Canvas2D.Scene("c");
	    var test1 = false;
	    var test2 = true;
	    if (test1) {
	        var bottomBoundary = new Moshu.Canvas2D.Rectangle(0, scene.canvas.height - 50, scene.canvas.width, 50);
	        bottomBoundary.fixed = true;
	        scene.add(bottomBoundary);

	        var img = new Moshu.Canvas2D.CanvasImage(100, 100, 50, 50, "./vs3.0/images/img1.png");
	        img.acceleration.ay = 20;
	        scene.add(img);

	        var line = new Moshu.Canvas2D.Line(200, 200, 50, 50);
	        line.acceleration.ay = 20;
	        scene.add(line);

	        img.bind("moved", function (args) {
	            //console.log(args.target.collisions.length);

	        });
	    }

	    if (test2) {
	        var triangle = new Moshu.Canvas2D.Triangle(50, 300, 50, 450, 450, 450);
	        triangle.fill.enabled = true;
	        triangle.fill.color = "white";
	        scene.add(triangle);

	        var rect = new Moshu.Canvas2D.Rectangle(300, 100, 50, 50);
	        rect.fill.enabled = true;
	        rect.fill.color = "blue";
	        rect.velocity.dy = 100;
	        rect.bind("moved", function (args) {
	            if (args.target.collisions.length > 0)
	                rect.fill.color = "red";
	            else rect.fill.color = "blue";
	            //console.log(args.target.collisions.length);
	        });
	        scene.add(rect);
	    }

	    scene.update();
	    

	  
	</script>
</body>
</html>